<template>
  <div>
    <div class="top-second-wrap">
      <div class="top-second-inner-wrap">
        <div class="breadcrumb-wrap">
          <bread-crumb></bread-crumb>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="考察代办" name="inspectionAgency"></el-tab-pane>
            <el-tab-pane label="考察记录" name="inspectionRecords"></el-tab-pane>
          </el-tabs>
        </div>
      </div>

    </div>

    <div class="main-container">
      <div v-if="activeName=='inspectionAgency'">
        <inspectionAgency></inspectionAgency>
      </div>
      <div v-if="activeName=='inspectionRecords'">
        <inspectionRecords></inspectionRecords>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import BreadCrumb from "@/components/bread-crumb/Index.vue";
  import inspectionAgency from "./components/inspectionAgency.vue";
  import inspectionRecords from "./components/inspectionRecords.vue";

  export default defineComponent({
    // setup() {
    // },
    components: {
      BreadCrumb,
      inspectionAgency,
      inspectionRecords,
    },
    data() {
      return {
        activeName: "inspectionAgency",
      };
    },
    methods: {
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      handleClick() {},
    },
  });
</script>


<style lang="scss" scoped>
.main-container {
  padding: 20px 0;
}
.top-second-wrap {
  background: white;
  .top-second-inner-wrap {
    width: 1164px;
    margin: 0 auto;
    .breadcrumb-wrap {
    }
  }

  // /deep/ .el-tabs__nav-wrap::after {
  //   background-color: unset;
  // }
  // /deep/ .el-tabs__header {
  //   margin: unset;
  //   height: 60px;
  //   line-height: 60px;
  // }
}

.main-container {
  width: 1164px;
  margin: 0 auto;
}
</style>